<template>
	<view>
		<form onsubmit="rerurn false" class="insForm" @submit="formSubmit" @reset="">
			<!-- 标题 -->
			<view class="cu-form-group margin-top">
				<view class="title">主题</view>
				<input bindinput="getTitleValue" v-model="goods.theme" name="theme" placeholder="给宝贝写一个主题吧!">
			</view>
			<!-- end -->

			<!-- 内容 -->
			<view class="cu-form-group margin-top">
				<textarea @tap="getContentValue"  v-model="goods.describe" name="describe" maxlength="1000" @input="textareaAInput"
					placeholder="描述宝贝的转手原因,入手渠道和使用感受"></textarea>
			</view>
			<!-- end -->

			<!-- 图片 -->
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					主图上传
				</view>
				<view class="action">
					{{imgList.length}}/1
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
						:data-url="imgList[index]">
						<image :src="imgList[index]" mode='aspectFill'></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length < 1">
						<text class="cuIcon-cameraadd"></text>
					</view>
				</view>
			</view>
			<!-- 地址-->
			<view class="cu-form-group margin-top" >
				<view class="title">地址</view>
				<input bindinput="getTitleValue"  v-model="goods.address"	name="address" placeholder="请输入您的收货地址">
			</view>

			<!-- 价钱 -->
			<view class="cu-form-group margin-top">
				<view class="title">出售价:</view>
				<input type="digit" @input="moneyInput"  v-model="goods.price" placeholder="请输入您心仪的售价" maxlength='7'
					name="Price">
			</view>
			<!-- end -->

			<!-- 选择分类  -->
			<view class="cu-form-group">
				<view class="title">分类:</view>
				<input disabled="true" name="classify" :value='classify'>
				
				<input v-show="false" type="hidden" name="typeId"   v-model="goods.typeId"/>
				<button class="cu-btn  bg-green" role="button" aria-disabled="false" @tap="showModal"
					data-target="DrawerModalL">选择</button>
			</view>
			<!-- end -->

			<!-- 新旧 -->
			<view class="cu-form-group">
				<view class="title">新旧:</view>
				<input disabled="true" name="itemLists" :value='itemLists[itemListsIndex]'>
				<button class="cu-btn  bg-green" role="button" aria-disabled="false" @tap="newState">选择</button>
			</view>

			<!-- 确定发布 -->
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-green margin-tb-sm lg" form-type="submit" @click ='confirm'>确定发布</button>
			</view>
			<!-- end -->

		</form>

		<!-- 模态框 -->
		<view @touchmove.stop="modeMove" class=" cu-modal drawer-modal justify-start "
			:class=" modalName == 'DrawerModalL'?'show':'' " @tap="hideModal">
			<scroll-view scroll-with-animation='true' scroll-y='true' class="cu-dialog basis-lg">
				<view class="cu-list menu text-left">
					<view class="cu-item " v-for=" (item,index) in  picker" :key="index" @tap="getClassify"
						:data-name="item.type" :data-value="item.id">
						<view class="content">
							<view>{{item.type}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import publish from '../../api/publish';
	
	export default {
		data() {
			return {
				modalName: '', //模态框开关
				picker: [{
					
				}],
				itemListsIndex: 0, //几层新下标（默认全新）
				itemLists: ['全新', '99新', '95新', '85新', '8新'], //几次新
				classify: '其他闲置', //分类选择默认
				// price: '', //出售价
				newMoney: '', //原价
				imgList: [], //图片上传
				goods:{
					address:'',
					describe:'',
					fileImgUrl:'',// 添加图片路径
					price:'',
					theme:'',
					typeId:''
				},
				
			}
		},
		methods: {
			// 图片上传
			ChooseImage() {
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						uni.uploadFile({
							url: 'http://47.109.194.123:1234/schoolET/wx/queryGoods/img', //仅为示例，非真实的接口地址
							filePath:res.tempFilePaths[0],
							header:{token:uni.getStorageSync('token')},
							name: 'file',
							success: (uploadFileRes) => {
								this.goods.fileImgUrl=JSON.parse(uploadFileRes.data).data
							}
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			// 删除照片
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个照片吗？',
					cancelText: '再看看',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1);
							this.imgList = this.imgList
						}
					}
				})
			},

			//限制只能到小数点2位
			moneyInput: function(e) {
				var money;
				if (/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)) { //正则验证，提现金额小数点后不能大于两位数字
					money = e.detail.value;
				} else {
					money = e.detail.value.substring(0, e.detail.value.length - 1);
				}
				this.money = money;
			},
			// 新旧程度
			newState: function(e) {
				var that = this;
				uni.showActionSheet({
					itemList: that.itemLists,
					success(e) {
						that.itemListsIndex = e.tapIndex
					}
				})
			},
			// 拦截模态框滚动事件
			modeMove: function() {

			},
			// 显示分类模态框
			showModal(e) {
				// console.log(this.goods)
				const that =this;
				publish.getType().then((res)=>{
					console.log(res)
					that.picker = res.data
					
				})
				this.modalName = e.currentTarget.dataset.target;
				
			},
			// 隐藏分类模态框
			hideModal(e) {
				this.modalName = null
			},
			// 得到分类的值
			getClassify: function(e) {
				this.classify = e.currentTarget.dataset.name,
				// this.classify_id = e.currentTarget.dataset.value
				this.goods.typeId = e.currentTarget.dataset.value
					
				this.hideModal();
			},
			// 提交表单数据
			confirm(){
				console.log(this.goods)
				publish.ins(this.goods).then((res)=>{
					wx.showToast({  
					   title:'成功上架',  
					   icon: 'success', // 可以是 'success'、'loading'、'none'  
					   duration: 2000 ,// 持续时间，单位毫秒，默认1500  
					})
				})
			}
			
		},
		onLoad(options) {

		},
		onShow() {

		},
		onHide() {

		},
		// 出发下拉刷新
		onPullDownRefresh() {
			// 模拟刷新完成
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		}
	}
</script>

<style>
	.rule {
		display: flex;
		justify-content: space-between;
	}

	.margin-top-xl-170 {
		margin-top: 170rpx;
	}
</style>